<template>
<section>
  <base-modal :title="title" :show.sync="visible" width="600px" class="create-performance-report-modal" @closed="reset">
    <div class="build-stage" v-if="stage === 'build'">
      <el-form label-position="top" ref="form" :model="form" >
        <el-form-item :label="$t('frame.backgroundTask.text8')" :error="!formValidation.reportName ? $t('common.base.isRequire'): ''" required>
          <el-input v-model="form.reportName" @change="validate" :maxlength="50"> </el-input>
        </el-form-item>
        <el-form-item :label="$t('performance.label.selectRule')" :error="!formValidation.ruleId ? $t('common.base.required'): ''" required>
          <el-select v-model="form.ruleId" @change="validate" :placeholder="$t('task.tip.planTaskTip4')" style="width: 100%;">
            <el-option
              v-for="item in openRules"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item :label="$t('common.base.rulerTip')">
          <el-input :value="ruleDesc" type="textarea" readonly></el-input>
        </el-form-item>
        <h3>{{$t('performance.title.reportStatistics')}}</h3>
        <el-form-item :label="$t('performance.label.statisticsObject')" class="target-group" required>
          <el-select v-model="form.range" :placeholder="$t('common.placeholder.selectMember')" @change="form.target = []" style="width: 130px;">
            <el-option
              v-for="item in rangeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

          <!-- start 按人员选择 -->
          <el-input
            v-if="!form.range && !isOpenData"
            readonly
            :value="form.target.map(({displayName}) => displayName).join(',')"
            :class="{'input-is-error': !formValidation.target}"
            @click.native="selectUser"
            style="width: 315px; margin-left: 15px;"
            :placeholder="$t('common.placeholder.selectMember')"
          >
          </el-input>

          <div class="ui-input-block" @click="selectUser" v-if="!form.range && isOpenData">
            <span class="placeholder-text" v-if="form.target.length <= 0">
              {{$t('common.placeholder.selectMember')}}
            </span>
            <div>
              <template v-for="(item, index) in form.target">
                <open-data v-if="item.staffId" :key="item.staffId" type="userName" :openid="item.staffId"></open-data>
                <span v-else :key="item.displayName">{{ item.displayName || item.name }}</span>
                <span v-if="index < form.target.length - 1" :key="index">,</span>
              </template>
            </div>
          </div>

          <!-- end 按人员选择 -->

          <!-- start 按团队选择 -->
          <el-input 
            v-if="form.range && !isOpenData" 
            readonly
            :value="form.target.join(',')"
            :class="{'input-is-error': !formValidation.target}" 
            @click.native="selectTeam" 
            style="width: 315px; margin-left: 15px;"
            :placeholder="$t('common.placeholder.selectDeptMember')"
          >
          </el-input>
          <div class="ui-input-block" @click="selectTeam" v-if="form.range && isOpenData">
            <span class="placeholder-text" v-if="form.target.length <= 0">
              {{$t('common.placeholder.selectDeptMember')}}
            </span>
            <div>
              <template v-for="(item, index) in form.target">
                <open-data v-if="item.staffId" :key="item.staffId" type="userName" :openid="item.staffId"></open-data>
                <open-data v-else-if="item.dingId" :key="item.dingId" type="departmentName" :openid="item.dingId"></open-data>
                <span v-else :key="item.name">{{ item.name }}</span>
                <span v-if="index < form.target.length - 1" :key="index">,</span>
              </template>
            </div>
          </div>
          <!-- end 按团队选择 -->
          <!-- <biz-team-select v-else multiple v-model="form.target" placeholder="请选择团队(默认选择全部团队)" :fetch-func="fetchTeam"></biz-team-select> -->

          <div v-if="!formValidation.target" class="target-is-error">
            {{$t('performance.placeholder.selectStatisticsObject')}}
          </div>

        </el-form-item>
        <el-form-item :label="$t('common.base.state')">
          <el-select v-model="form.state" :placeholder="$t('common.placeholder.select')" style="width: 130px;" @change="form.timeType = 0">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

        </el-form-item>
        <div class="customized-label">

          <span v-if="!form.state" class="el-form-item__label is-required">{{$t('common.base.completeTime')}}</span>
          <span v-else class="el-form-item__label">
            <el-select v-model="form.timeType" :placeholder="$t('common.placeholder.select')">
              <el-option
                v-for="item in timeTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </span>

          <el-date-picker
            v-model="form.time"
            type="daterange"
            value-format="timestamp"
            :default-time="['00:00:00', '23:59:59']"
            align="right"
            unlink-panels
            range-separator="-"
            :start-placeholder="$t('common.base.startDate')"
            :end-placeholder="$t('common.base.endDate')"
            @change="validate"
            :class="{'input-is-error': !formValidation.time}"
            :picker-options="createTimePickerOptions">
          </el-date-picker>

          <div v-if="!formValidation.time" class="time-is-error">
            {{form.time && form.time.length ? $t('performance.placeholder.timeNotGreaterThanThreeMonths') : $t('common.placeholder.selectStartTime')}}
          </div>
        </div>
        <el-form-item :label="$t('common.base.remark')">
          <el-input v-model="form.remarks" type="textarea" :maxlength="500"></el-input>
          <p style="color: #999;margin: 0">* {{$t('performance.tip.generateReportTime')}}</p>
        </el-form-item>

        <el-form-item :label="$t('performance.label.carbonCopy')">
          <!-- <base-select-user-input style="width: 350px" v-model="form.carbonCopy" multiple :collapse="false">
          </base-select-user-input> -->
          <publink-select
            style="width: 350px"
            v-model="form.carbonCopy"
            filterable
            clearable
            remote
            multiple
            :placeholder="$t('performance.placeholder.selectCarbonCopy')"
            :loading="remoteSearchLoading"
            :remote-method="getApproveList">
            
            <el-option
              v-for="item in approveList"
              :key="item.userId"
              :label="item.displayName"
              :value="item.userId"
              :origin="item"
            >
              <template v-if="isOpenData">
                <open-data type="userName" :openid="item.staffId"></open-data>
              </template>
            </el-option>
            
            <template slot="multiple" slot-scope="{ item }">
              <template v-if="isOpenData">
                <open-data type="userName" :openid="item.staffId"></open-data>
              </template>
              <template v-else>
                {{item.name || item.displayName}}
              </template>
            </template>
            
          </publink-select>
        </el-form-item>

        <!--<el-form-item label="审核人" >-->
          <!--<el-select v-model="approvePersonIds" multiple clearable filterable @change="validate" placeholder="请选择" disabled style="width: 300px">-->
            <!--<el-option-->
              <!--v-for="item in approvePerson"-->
              <!--:key="item.value"-->
              <!--:label="item.label"-->
              <!--:value="item.value">-->
            <!--</el-option>-->
          <!--</el-select>-->
        <!--</el-form-item>-->

        <el-form-item :label="$t('performance.label.releaseProcess')" class="publish">
          <approve-process stage="create"></approve-process>
        </el-form-item>
      </el-form>
    </div>
    <div class="dialog-footer" slot='footer'>
      <el-button type="plain-third" @click="visible = false">{{$t('common.base.cancel')}}</el-button>
      <el-button type="primary" @click="onSubmit" :loading="submitPending" :disabled="submitPending">{{$t('common.base.confirm')}}</el-button>
    </div>
    <div class="confirm-stage" v-if="stage === 'confirm'">
      <p class="tip">{{$t('performance.tip.repeatStatistics', {length: reports.length})}}</p>
      <div class="table-wrap">
        <el-table :data="reports" stripe >
          <el-table-column
            v-for="(column, index) in columns"
            :key="`${column.field}_${index}`"
            :label="column.label"
            :prop="column.field"
            :width="column.width"
            :show-overflow-tooltip="column.field != 'executor'">
            <template slot-scope="scope">
              <template v-if="column.field === 'tagName'">
                {{ scope.row[column.field] }}
              </template>
              <template v-else-if="column.field === 'taskNo'">
                <a href="" class="view-detail-btn" @click.stop.prevent="viewTask(scope.row)">{{scope.row[column.field]}}</a>
              </template>
              <template v-else-if="column.field === 'executor'">
                
                <template v-if="isOpenData">
                  <template v-if="Array.isArray(scope.row[column.field])">
                    <open-data v-for="item in scope.row[column.field]" :key="item.staffId" type="userName" :openid="item.staffId"></open-data>
                  </template>
                  <template v-else>
                    <open-data type="userName" :openid="scope.row[column.field] && scope.row[column.field].staffId"></open-data>
                  </template>
                </template>
                
                <template v-else>
                  {{scope.row[column.field].displayName}}
                </template>
                
              </template>
              <!--<template v-else-if="column.field === 'settlement'">-->
              <!--{{scope.row[column.field]}}-->
              <!--</template>-->
              <template v-else>
              {{scope.row[column.field]}}
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="dialog-footer" style="margin-top: 15px;">
        <el-button @click="visible = false">{{$t('common.base.cancel')}}</el-button>
        <el-button type="primary" @click="confirmCreateReport('screen')" :disabled="pending">{{$t('performance.button.removeRepeat')}}</el-button>
        <el-button type="primary" @click="confirmCreateReport('')" :disabled="pending">{{$t('performance.button.includeRepeat')}}</el-button>
      </div>
    </div>

    <div class="stage-success" v-if="stage === 'success'">
      <p>{{$t('frame.backgroundTask.text8')}}：{{createReportResult.name || createReportResult.reportName}}</p>
      <p>{{$t('frame.backgroundTask.text9')}}：{{createReportResult.totalNumber}}</p>
      <p>{{$t('frame.backgroundTask.text10')}}：{{createReportResult.hitNumber}}</p>
      <p>{{$t('frame.backgroundTask.text11')}}：{{createReportResult.time}}</p>
      <div class="dialog-footer" style="margin-top: 15px;">
        <el-button type="primary" @click="viewDetail">{{$t('common.base.checkDetail')}}</el-button>
      </div>
    </div>
  </base-modal>
  <choose-team-user-options-dialog
    ref="teamUserOptionsDialog"
    v-model="form.isRepeat"
    @update="updateFormIsrepeat"
  >
  </choose-team-user-options-dialog>
  <!-- start 选择团队人员处理方式弹窗 -->
  <!-- end 选择团队人员处理方式弹窗 -->
</section>
</template>

<script>
import platform from '@src/platform';
import { useDatePicker } from 'pub-bbx-utils';

import * as TeamApi from '@src/api/TeamApi';
import {createPerformanceReport, getApprovePerson, getApprovePersonList, checkTagUserRepeat, checkTaskRepeatCalculation} from '@src/api/PerformanceApi';

import ApproveProcess from './ApproveProcess.vue'
import ChooseTeamUserOptionsDialog from './ChooseTeamUserOptionsDialog.vue';
/* mixin */
import VersionMixin from '@src/mixins/versionMixin/index.ts'
/* util */
import { IsMultiClient } from '@src/util/platform.ts'
import { isOpenData, openAccurateTab } from '@src/util/platform';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { showExportListAlert } from '@src/util/alert';
import { t } from '@src/locales';

import { BaseSelectUserModeEnum } from '@src/component/common/BaseSelectUser'

const datePicker = useDatePicker()
export default {
  name: 'edit-performance-report-dialog',
  mixins: [VersionMixin],
  props: {
    initData: {
      type: Object,
      default: () => ({}),
    }
  },
  data() {
    return {
      isOpenData,
      visible: false,
      pending: false,
      settingPending: false,
      remoteSearchLoading: false,
      approveList: [],

      approvePerson: [],
      approvePersonIds: [],
      createTimePickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          datePicker.nearDate(t('common.time.lastWeek'), 1, 'week'),  
          datePicker.nearDate(t('common.time.lastMonth'), 1, 'month'),
          datePicker.nearDate(t('common.time.lastThreeMonth'), 3, 'month'),
        ]
      },
      rangeOptions: [
        {
          label: t('common.base.allowPerson'),
          value: 0,
        },    
        {
          label: t('common.base.allowDepartment'),
          value: 1,
        },
      ],
      statusOptions: [
        {
          label: t('common.base.usualStatus.finish'),
          value: 0,
        },
        {
          label: t('performance.label.finishedAndSettled'),
          value: 1,
        },
      ],
      timeTypeOptions: [
        {
          label: t('common.base.completeTime'),
          value: 0,
        },
        {
          label: t('common.time.processTime.balanceTime'),
          value: 1,
        },
      ],
      reports: [],
      stage: 'build',
      createReportResult: {},
      form: {
        reportName: '',
        ruleId: '',
        time: [],
        range: 0,
        target: [],
        carbonCopy: [],
        state: 0,
        timeType: 0,
        remarks: '',
        sign: 'first',
        isRepeat: ''
      },
      formValidation: {
        reportName: true,
        ruleId: true,
        target: true,
        time: true,
      },
      submitted: false,
      teamAndUser: {
        data: [],
        list: [],
        repeatNameList: [],
      },
      submitPending: false,
      selectedAll: []
    }
  },
  computed: {
    isCreate() {
      return this.stage === 'build'
    },
    title() {
      if (this.isCreate) return t('performance.title.createPerformance')
      if (this.stage === 'confirm') return t('performance.title.repeatStatistics')
      
      return t('frame.backgroundTask.text13')
    },
    openRules() {
      return (this.initData.AllOpenRules || [])
        .map(({id, ruleName, ruleDesc}) => ({
          label: ruleName,
          value: id,
          ruleDesc,
        }));
    },
    users() {
      return (this.initData.AllUsers || [])
        .map(({userName, userId}) => ({
          label: userName,
          value: userId,
        }));
    },
    tags() {
      return (this.initData.AllTags || [])
        .map(({tagName, tagId}) => ({
          label: tagName,
          value: tagId,
        }));
    },
    targetOptions() {
      if (this.form.range) return this.tags;
      return this.users;
    },
    ruleDesc() {
      let formRuleId = this.form.ruleId;
      if (formRuleId) return this.openRules.filter(({value}) => value === formRuleId)[0].ruleDesc;
      return '';
    },
    columns() {
      const range = this.form.range;
      return [
        {
          label: t('performance.displayName.tagName'),
          field: 'tagName',
          show: !!range
        },
        {
          label: t('common.form.type.taskNo'),
          field: 'taskNo',
          show: true
        },
        {
          label: t('common.form.type.customer'),
          field: 'cusName',
          show: true
        },
        {
          label: t('common.fields.executorUser.displayName'),
          field: 'executor',
          width: '100px',
          show: true
        },
      ].filter(c => c.show)
    },
    /** 是否开启服务团队派单 */
    isAllotByTag() {
      return this.initData?.isAllotByTag === true;
    }
  },
  mounted() {
    if(!this.isAllotByTag && !IsMultiClient) {
      this.rangeOptions.splice(1, 1);
    }
  },
  methods: {
    fetchTeam(params) {
      return TeamApi.tagList(params);
    },
    init() {
      getApprovePerson()
        .then(res => {
          if (res.status) return;
          this.approvePerson = res.data
            .map(({userId, displayName}) => ({
              label: displayName,
              value: userId
            }));
          this.approvePersonIds = res.data
            .map(({userId}) => userId);
        })
        .catch(err => console.error(err))
    },
    confirmCreateReport(sign = '') {
      let params = {
        ...this.buildParams(),
        sign,
      };
      
      this.pending = true;
      
      const createPerformanceReportPromise = createPerformanceReport(params)
      this.checkNumExceedLimitAfterHandler(createPerformanceReportPromise)
        .then(res => {
          let isSucc = res.status == 0;
        
          this.pending = false;
          
          
          if(isSucc) {
            this.visible = false;
            showExportListAlert(res.message)

            // this.showExportList();
          }else{
            platform.alert(res.message || t('common.base.tip.unknownError2'));
          }
        
        })
        .catch(e => console.error('e', e));
    },
    onSubmit() {
      let res = this.validateForm();
      if (this.submitPending) return
      this.submitted = true;
      if (!res) return;
      this.submitPending = true
      const params = this.buildParams();
      
      const CheckTaskRepeatCalculationPromise = checkTaskRepeatCalculation(params)
      
      this.checkNumExceedLimitAfterHandler(CheckTaskRepeatCalculationPromise)
        .then(res => {
          let data = res.data;
          let isSucc = res.status == 0;
          
          if (!isSucc) {
            return this.$platform.notification({
              title: t('common.base.fail'),
              message: (h => (<div>{res.message || t('common.base.tip.unknownError2')}</div>))(this.$createElement),
              type: 'error',
            });
          }
          
          // 结算是否重复
          if (!data) {
            this.visible = false;
            this.confirmCreateReport();
          } else {
            this.reports = data;
            this.stage = 'confirm';
          }
        })
        .catch(e => {
          console.error('e', e);
        })
        .finally(()=> {
          this.submitted = false
          this.submitPending = false
        })
    },
    buildTarget() {
      try {
        let data = this.teamAndUser?.data || {};
        let targetObject = {};
        
        let users = data?.users || [];
        let depts = data?.depts || [];
        
        users.forEach(u => {
          let tagId = u.tagId;
          if(!targetObject.hasOwnProperty(tagId)) {
            targetObject[tagId] = []
          }
          targetObject[tagId].push(u.userId)
        });
        
        depts.forEach(team => { targetObject[team.id] = 'isAll'});
        
        return JSON.stringify(targetObject);
        
      } catch (error) {
        console.warn(error);
        return ''
      }
      
    },
    buildParams() {
      const {ruleId, reportName, time, range, state, remarks, sign, timeType, carbonCopy, isRepeat} = this.form;
      let target = '';
      let userIsPepeat = '';
      
      if (this.form.target && this.form.target.length) {
        if (!range) {
          target = this.form.target.map(({userId}) => userId).join(',') || '';
        } else {
          target = this.buildTarget();
          userIsPepeat = isRepeat ? isRepeat : 'repeat'
        }
      }
      
      return {
        ruleId,
        reportName,
        state,
        timeType: !state ? 0 : timeType,
        remarks,
        startTime: time?.[0],
        endTime: time?.[1],
        [range ? 'teams' : 'users']: target,
        carbonCopy: carbonCopy.join(','),
        sign,
        isRepeat: userIsPepeat,
      }
    },
    viewTask(row){
      let fromId = window.frameElement.getAttribute('id');
      
      // this.$platform.openTab({
      //   id: `taskView_${row.taskId}`,
      //   title: `工单${row.taskNo}`,
      //   close: true,
      //   url: `/task/view/${row.taskId}?noHistory=1`,
      //   fromId
      // })
      openAccurateTab({
        type: PageRoutesTypeEnum.PageTaskView,
        key: row.taskId,
        titleKey: row.taskNo,
        params: 'noHistory=1',
        fromId
      })
    },
    viewDetail() {
      const id = this.createReportResult.reportId || this.createReportResult.id;
      let fromId = window.frameElement.getAttribute('id');
      this.visible = false;
      this.reset();
      
      // this.$platform.openTab({
      //   id: `performanceReport${id}`,
      //   title: '绩效报告详情',
      //   close: true,
      //   url: `/performance/v2/report/desc/${id}`,
      //   fromId
      // })
      openAccurateTab({
        type: PageRoutesTypeEnum.PagePerformanceReport,
        key: id,
        titleKey: t('common.pageTitle.pageReportDesc'),
        fromId
      })
    },
    validate() {
      if (!this.submitted) return;
      this.validateForm();
    },
    validateForm() {
      const keys = Object.keys(this.formValidation);
      let val = null;
      
      return keys.map(key => {
        val = this.form[key];
        // 8035200000 ms = 93 days
        if (key === 'target') return this.formValidation[key] = Array.isArray(val) && !!val.length;
        if (key === 'time') return this.formValidation[key] = Array.isArray(val) && !!val.length && this.form.time[1] - this.form.time[0] <= 8035200000;
        
        return this.formValidation[key] = !!val
      })
        .every(bool => bool);
    },
    toggleDialog() {
      this.selectedAll = []
      this.visible = !this.visible;
    },
    getApproveList(keyword) {
      return getApprovePersonList({
        keyword: keyword || '',
        pageNum: 1,
        pageSize: 20,
      })
        .then(res => {
          this.approveList = res.data.list;
        })
        .catch(e => console.error('e', e));
    },
    reset() {
      if (this.stage === 'success') {
        this.$emit('refresh-list');
      }
      
      this.form = {
        reportName: '',
        ruleId: '',
        time: [],
        range: 0,
        target: [],
        carbonCopy: [],
        state: 0,
        timeType: 0,
        remarks: '',
        sign: 'first',
        isRepeat: '',
      };
      this.stage = 'build';
      this.submitted = false;
      this.formValidation = {
        reportName: true,
        ruleId: true,
        target: true,
        time: true,
      }
      this.teamAndUser = {
        list: [],
        data: [],
        repeatNameList: []
      }
    },
    /** 选择人员  */
    selectUser() {
      let choose = this.isAllotByTag ? 'team' : 'dept';
      let options = {
        max: -1,
        selected: (
          this.isAllotByTag 
            ? { users: this.form.target } 
            : this.form.target
        ),
        from: 'profermance', // 标示从"绩效报告里进去的，用于是否额外传参",
        showDeleteUser: true,
        mode: BaseSelectUserModeEnum.Filter,
        showDelete: true,
      }
      
      this.$fast.select.multi.user(options).then(res => {
        if(res.status != 0) return
        
        this.form.target = res?.data?.users || [];
        
      })
        .catch(err => console.error(err))
    },
    /** 选择团队  */
    selectTeam() {
      
      let options = {
        max: -1,
        selectedAll: this.selectedAll || [],
        isCanChooseRole: false,
        mode: BaseSelectUserModeEnum.Filter
      };
      
      this.$fast.select.multi.all(options).then(res => {
        
        const data = res.data;
        
        let users = data.users;
        let depts = data.depts;
        let serviceProviders = data.serviceProviders;
        
        const allDepts = depts.concat(serviceProviders)
        
        this.selectedAll = data.all
        this.teamAndUser.data = {
          users: users,
          depts: allDepts
        }
        
        users = users.map(user => {
          return { id: user.userId, name: user.displayName, staffId: user.staffId }
        })
        
        this.teamAndUser.list = allDepts.concat(users);
        
        if (this.isOpenData) {
          this.form.target = this.teamAndUser.list
        } else {
          this.form.target = this.teamAndUser.list.map(({ name }) => name);
        }
        
        this.checkTagAndUserRepeat();
        
      })
        .catch(err => console.error(err))
    },
    /** 检查团队用户是否重复 */
    checkTagAndUserRepeat() {
      let params = {
        paramJson: this.buildTarget()
      };
      this.pending = true;
      checkTagUserRepeat(params).then(result => {
        let data = result.data;
        let isSucc = result.status == 0;
        let isRepeat = false;
        
        if(isSucc) {
          isRepeat = (data.isRepeat === true);
          
          if(isRepeat) {
            this.teamAndUser.repeatNameList = data.repeatUserNameList;
            let repeatUserList = data?.repeatUserList || []
            this.$refs.teamUserOptionsDialog.show(this.teamAndUser.repeatNameList, repeatUserList);
          }
          
        } else {
          this.$platform.notification({
            title: t('common.base.fail'),
            message: result.message || '',
            type: 'error',
          });
        }
        
      }).catch(err => console.error('checkTagUserRepeat', err))
        .finally(() => this.pending = false)
    },
    updateFormIsrepeat(value) {
      if(value == 'cancel') {
        this.selectTeam();
      }
    },
    showExportList() {
      window.parent.showExportList();
      window.parent.exportPopoverToggle(true);
    }
  },
  components: {
    [ApproveProcess.name]: ApproveProcess,
    [ChooseTeamUserOptionsDialog.name]: ChooseTeamUserOptionsDialog,
  }
}
</script>

<style lang="scss">
.input-is-error, .input-is-error input {
  border-color: #f56c6c;
}

.confirm-stage {
  .tip {
    font-size: 12px;
    color: $text-color-secondary;
    margin-bottom: 0;
    position: relative;
    top: -5px;
    padding-left: 9px;
  }

  .table-wrap {
    max-height: 300px;
    overflow-y: auto;
  }
}

.target-is-error {
  position: absolute;
  bottom: -20px;

  color: #f56c6c;
  font-size: 12px;
  padding: 3px 0 0 0px;
  line-height: 16px;
}

.target-group .el-form-item__content{
  display: flex;

  .biz-team-select {
    width: 315px;
    margin-left: 15px;
  }

  .el-input__inner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.customized-label {
  height: 40px;
  margin-bottom: 18px;
  .el-select {
    width: 100%;
  }

  .time-is-error {
    color: #f56c6c;
    font-size: 12px;
    padding: 3px 0 0 110px;
  }
}

.create-performance-report-modal {

  .approve-process-container {
    width: 350px;
    margin: 0;
  }

  .base-modal-body {
    padding: 15px;
    padding-right: 25px;
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }

  .ui-input-block {
    flex: 1;
    margin-left: 15px;
    height: 32px;
    @include text-ellipsis;
    .open-data {
      margin-right: 0;
    }
  }

}

.customized-label{
  .el-date-editor{
    width:  350px !important;
  }
}

</style>
